import React, { memo,useEffect } from 'react'
import { useDispatch,useSelector,shallowEqual } from 'react-redux'

import {HOT_RECOMMEND_LIMIT} from '@/common/contants'
import ZHThemeHeaderRCM from '@/components/theme-header-rcm';
import { getHotRecommendAction } from '../../store/actionCreators'
import ZHSongsCover from '@/components/songs-cover';
import {
  HotRecommendWrapper
} from './style';

export default memo(function ZHHotRecommend() {
  // state
  // redux hooks
  const {hotRecommends} = useSelector(state => ({
    hotRecommends: state.getIn(["recommend","hotRecommends"])
  }),shallowEqual)
  const dispatch = useDispatch()

  // 其他hook
  useEffect(() => {
    dispatch(getHotRecommendAction(HOT_RECOMMEND_LIMIT))
  },[dispatch])
  return (
    <HotRecommendWrapper>
        <ZHThemeHeaderRCM title="热门推荐" keywords={["华语", "流行", "民谣", "摇滚", "电子"]} />
        <div className="recommend-list">
          {
            hotRecommends.map((item, index) => {
              return <ZHSongsCover key={item.id} info={item}/>
            })
          }
        </div>
      
    </HotRecommendWrapper>
  )
})
